<template>
	<view class="content">
		<map id="map" :longitude="longitude" :latitude="latitude" scale="13" controls="controls" @controltap="controltap"
			@tap="bindtapMap" :markers="markers" @markertap="removeMarker" @labeltap="removeMarker"
			:polygons="polygons.length > 0 ? polygons : ''" style="width: 100%; height: 92vh;">
		</map>
		<view class="btn">
			<button @click="() => { this.showw = true }">+</button>
		</view>
		<view class="popup">
			<u-popup :show="showw" mode="left" @close="closee">
				<view style="width: 60vw;height: 100vh;padding: 0 10px;" class="bottom">
					<view style="margin: 10px 0;">
						<u-button type="warning" :plain="true" @tap="creatPolygons">危险围栏</u-button>
					</view>
					<view style="margin-bottom: 10px;">
						<u-button type="success" :plain="true" @tap="removePolygons" class="del">删除围栏</u-button>
					</view>
					<view style="margin-bottom: 10px;">
						<u-button type="error" :plain="true" @tap="creatPolygonsone">警告围栏</u-button>
					</view>
					<view style="margin-bottom: 10px;">
						<u-button type="primary" :plain="true" @tap="creatPolygonstwo">安全围栏</u-button>
					</view>
					<view style="margin-bottom: 10px;">
						<u-button type="primary" :plain="true" @tap="toOther">检测羊群</u-button>
					</view>
					
					
					
				</view>
			</u-popup>
		</view>
		<u-popup :show="show" @close="close" @open="open">
			<view class="popupview">
				<input type="text" placeholder="请输入羊的数量" class="sheepinput" v-model="sheepinput"><br />
				<text @tap="value100">100</text>
				<text @tap="value500">500</text>
				<text @tap="value1000">1000</text>
				<up-button @tap="enter">确定</up-button>
			</view>
		</u-popup>
	</view>
</template>

<script>
import QQMapWX from '../../common/qqmap-wx-jssdk.js'
import { getlistcyp, getupdatecypdanger, getupdatecypwarning, getupdatecypsafe, getdeletecyp } from '../../api'
export default {
	data() {
		return {
			latitude: 43.63, // 纬度  横的是纬度
			longitude: 87.493, // 经度 竖的是经度
			markers: [],//危险区顶点坐标
			markersone: [],//警告区顶点坐标
			markerstwo: [],//安全区顶点坐标
			polygons: [], // 多边形
			markersone: [],//危险区
			markerstwo: [],//警告区
			markersthree: [],//安全区
			qqmapsdk: null,
			show: false,//控制弹出层的显示
			showw: false,
		}
	},
	onLoad() {
		this.getdata()
		//获取qqmapsdk
		this.qqmapsdk = new QQMapWX({
			key: 'M5JBZ-XEZCJ-6SPFB-DH4E5-QFCS7-FCBTQ'
		})
	},
	methods: {
		async getdata() {
			await getlistcyp().then(res => {
				this.dataone = res.data
			})
			this.markersone = this.dataone.fence
			this.markerstwo = this.dataone.polygons
			this.markersthree = this.dataone.polygonstwo
			this.polygons = [{
				points: [...this.markersone],
				fillColor: "#F56C6C", // 填充颜色
				strokeColor: "#F56C6C", // 描边颜色
				strokeWidth: 2, // 描边宽度
				zIndex: 3 //层级
			}, {
				points: [...this.markerstwo],
				fillColor: "#E6A23C", // 填充颜色
				strokeColor: "#E6A23C", // 描边颜色
				strokeWidth: 2, // 描边宽度
				zIndex: 4 //层级
			},
			{
				points: [...this.markersthree],
				fillColor: "#67C23A", // 填充颜色
				strokeColor: "#67C23A", // 描边颜色
				strokeWidth: 2, // 描边宽度
				zIndex: 4 //层级
			},]
		},
		showtrue() {
			this.show = true
		},
		open() {

		},
		close() {
			this.show = false
		},
		closee() {
			this.showw = false
		},
		//创建标记点
		bindtapMap(e) {
			let tapPoint = e.detail;
			let markers = this.markers
			let newContent = markers.length
			let markerItem = {
				id: newContent,
				latitude: null,
				longitude: null,
				rotate: 0,//旋转角度
				alpha: 1,//透明度
				zIndex: 3//层级
			}
			markerItem.latitude = tapPoint.latitude;
			markerItem.longitude = tapPoint.longitude;
			markers.push(markerItem)
			this.markers = markers
		},

		// 生成危险区围栏
		creatPolygons() {
			this.markersone = this.markers
			this.markers = []
			//创建多边形围栏/服务范围
			console.log("我要创建围栏", this.markersone);
			if (this.markersone.length < 3) {
				return uni.showToast({
					title: '请先在地图上标记点,且不少于三个点',
					icon: 'none'
				})
			}
			//polygons是围栏的点
			this.polygons = [{
				points: [...this.markersone],
				fillColor: "#F56C6C", // 填充颜色  Danger：危险区域
				strokeColor: "#F56C6C", // 描边颜色
				strokeWidth: 2, // 描边宽度
				zIndex: 3 //层级
			}, {
				points: [...this.markerstwo],
				fillColor: "#E6A23C", // 填充颜色 Warning：警告区域
				strokeColor: "#E6A23C", // 描边颜色
				strokeWidth: 2, // 描边宽度
				zIndex: 4 //层级
			},
			{
				points: [...this.markersthree],
				fillColor: "#67C23A", // 填充颜色
				strokeColor: "#67C23A", // 描边颜色
				strokeWidth: 2, // 描边宽度
				zIndex: 4 //层级
			},]
			getupdatecypdanger({ markers: this.markersone }).then(res => {})

		},
		//生成警告区围栏
		creatPolygonsone() {
			this.markerstwo = this.markers
			this.markers = []
			if (this.markerstwo.length < 3) {
				return uni.showToast({
					title: '请先在地图上标记点,且不少于三个点',
					icon: 'none'
				})
			}
			this.polygons = [{
				points: [...this.markersone],
				fillColor: "#ff985d66", // 填充颜色
				strokeColor: "#ff985d66", // 描边颜色
				strokeWidth: 2, // 描边宽度
				zIndex: 3 //层级
			}, {
				points: [...this.markerstwo],
				fillColor: "#ff00ff", // 填充颜色
				strokeColor: "#ff00ff", // 描边颜色
				strokeWidth: 2, // 描边宽度
				zIndex: 4 //层级
			},
			{
				points: [...this.markersthree],
				fillColor: "#00ff00", // 填充颜色
				strokeColor: "#55ff00", // 描边颜色
				strokeWidth: 2, // 描边宽度
				zIndex: 4 //层级
			},]
			//修改数据库围栏数据
			getupdatecypwarning({ markers: this.markerstwo }).then(res => {})
		},
		//生成安全区围栏
		creatPolygonstwo() {
			this.markersthree = this.markers
			this.markers = []
			if (this.markersthree.length < 3) {
				return uni.showToast({
					title: '请先在地图上标记点,且不少于三个点',
					icon: 'none'
				})
			}
			this.polygons = [{
				points: [...this.markersone],
				fillColor: "#ff985d66", // 填充颜色
				strokeColor: "#ff985d66", // 描边颜色
				strokeWidth: 2, // 描边宽度
				zIndex: 3 //层级
			}, {
				points: [...this.markerstwo],
				fillColor: "#ff00ff", // 填充颜色
				strokeColor: "#ff00ff", // 描边颜色
				strokeWidth: 2, // 描边宽度
				zIndex: 4 //层级
			},
			{
				points: [...this.markersthree],
				fillColor: "#00ff00", // 填充颜色
				strokeColor: "#55ff00", // 描边颜色
				strokeWidth: 2, // 描边宽度
				zIndex: 4 //层级
			},]
			//修改数据库围栏数据
			getupdatecypsafe({ markers: this.markersthree }).then(res => { })
		},
		removeMarker(e) {
			//删除重复点击的标记点
			let markers = this.markers;
			markers.splice(e.markerId - 1, 1)

			//重置marker数组的id和content
			for (let j = 0; j < markers.length; j++) {
				markers[j].id = j + 1;
				markers[j].callout.content = j + 1;
			}
			this.markers = markers
		},
		removePolygons() {
			//删除围栏和标记
			this.markers = [],
				this.polygons = [],
				this.markersone = [],
				this.markerstwo = [],
				this.markersthree = [],
				this.polygonsMarkers = []
			getdeletecyp().then(res => {})

		},
		//跳转到羊圈的页面
		toOther() {
			uni.switchTab({
				url: '/pages/optimization/optimization'
			})
		},
	}
}
</script>

<style lang="scss">
.content {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.logo {
	height: 200rpx;
	width: 200rpx;
	margin-top: 200rpx;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 50rpx;
}

.text-area {
	display: flex;
	justify-content: center;
}

.title {
	font-size: 36rpx;
	color: #8f8f94;
}

.bottom {
	u-button {
		margin-top: 40rpx;
	}
}

.popupview {
	height: 25vh;
	background-color: antiquewhite;

	.sheepinput {
		text-align: center;
		width: 100%;
		height: 100rpx;
		line-height: 100rpx;
		margin-bottom: 50rpx;
	}

	text {
		margin-top: 100rpx;
		margin: 0 100rpx;
		height: 60rpx;
		line-height: 60rpx;
	}

	up-button {
		position: absolute;
		top: 250rpx;
		left: 350rpx;
	}
}

.btn {
	position: fixed;
	top: 0;
	left: 0;
}
</style>
